<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">健康数据可视化</span>
      </template>
    </el-page-header>

    <el-card class="w-fill" shadow="never">
      <el-tabs
        :model-value="_$.currentTabIndex"
        tab-position="left"
        class="demo-tabs"
        @tab-change="$.onTabChange"
      >
        <el-tab-pane
          v-for="item in _$.tabs"
          :label="item.title"
          :name="item.id"
        >
          <el-space direction="vertical" fill wrap class="w-fill" :size="10">
            <el-card class="w-fill" shadow="hover">
              <el-form
                label-width="auto"
                :inline="true"
                :model="_$.query.requestParam"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="时间区间">
                  <el-date-picker
                    v-model="_$.query.requestParam.timeSetting"
                    type="datetimerange"
                    :shortcuts="_$.shortcuts"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </el-form-item>
                <el-form-item label="汇总方式">
                  <el-select
                    v-model="_$.query.requestParam.dataType"
                    style="width: 120px"
                    size="small"
                  >
                    <el-option label="AVG" value="AVG" />
                    <el-option label="MAX" value="MAX" />
                    <el-option label="MEDIAN" value="MEDIAN" />
                    <el-option label="MIN" value="MIN" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间单位">
                  <el-select
                    v-model="_$.query.requestParam.dateType"
                    style="width: 120px"
                    size="small"
                  >
                    <el-option label="DAY" value="DAY" />
                    <el-option label="HOURS" value="HOURS" />
                    <el-option label="MINUTE" value="MINUTE" />
                    <el-option label="MONTH" value="MONTH" />
                    <el-option label="YEAR" value="YEAR" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-space wrap>
                    <el-button @click="$.onReset">重置</el-button>
                    <el-button type="primary" @click="$.onSearch"
                      >查询</el-button
                    >
                  </el-space>
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="w-fill" shadow="hover">
              <div
                :id="'main-' + item.id"
                style="width: 800px; height: 600px"
              ></div>
            </el-card>
          </el-space>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-space>
</template>

<style scoped></style>
